<script setup lang="ts">
import { reactive,ref,computed } from "vue";

var top_text = "<h3>买不了吃亏</h3>";

var shop = reactive([
  { id: 2, name: "手机", describe: "必不可少,玩游戏", price: "2500~9999" ,"isHot":true},
  { id: 3, name: "电脑", describe: "办公+游戏,玩游戏", price: "5000~9999" },
  { id: 4, name: "电视", describe: "老年必备", price: "2588~48348" },
  { id: 6, name: "摄影机", describe: "记录美好生活", price: "3000~212121" },
  { id: 6, name: "book", describe: "增长知识", price: "25~250" ,"isHot":true}
]);

var find_text = ref("");

var filterShop = computed(()=>{
  if(!find_text.value.trim()){
    return shop;
  }

  const query = find_text.value.toLowerCase();
  console.log("搜索关键字" + find_text);
  return shop.filter(item =>
    item.name.toLowerCase().includes(query) || item.describe.toLowerCase().includes(query)
  );
});

</script>
<template> 

<div class="top">
  <input type="text" v-model="find_text" placeholder="搜一搜"></input>
  <div class="top_h3" v-html="top_text"></div>
</div>

<div>
  <h1 class="list_tit">商品列表</h1>
  <div class="list">
    <div class="list_ul">
      <div class="list_li" v-for="(item,index) in filterShop" :key="index">
        <div class="li_img">商品图片</div>
        <p>{{ item.name }}</p>
        <span>{{ item.describe }}</span>
        <h3>{{ item.price }}<span class="isHot" v-if="item.isHot">热销</span></h3>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.top{
height: 53px;
background: #333;
display:flex;
justify-content:center;
align-items:center;
}
.top input{
display:block;
padding-left: 5px;
color: #666;
width: 150px;
height:32px;
border-radius: 10px;
}
.top button{
display:block;
padding-left: 5px;
color: #666;
width: 50px;
height: 35px;
border-radius: 10px;
border:none;
font-size: 13px;
}
.top_h3{
width:1080px;
font-weight:100;
line-height:53px;
color:#f2f2f2;
text-align: end;
}
.list_tit{
width:1280px;
margin:30px auto 50px;
}
.list{
width:100%;
display: flex;
justify-content:center;
}
.list_ul{
width:1280px;
height:300px;
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items:center;
}
.list_li{
position: relative;
width: 300px;
border-radius: 5px;
height: 100%;
text-align: left;
overflow: hidden;
margin: 0 18px 20px 0;
}
.li_img{
width:100%;
height:200px;
text-align:center;
line-height:200px;
background:#ABE1CC;
}
.list_li p{
font-size:18px;
line-height:0px;
}
.list_li span{
display:block;
font-size:14px;
color:#888;
}
.list_li h3{
font-size:28px;
color:#CF4444;
line-height:0px;
}
.list_li .isHot{
position: absolute;
width: 50px;
height: 30px;
text-align:center;
line-height:30px;
background:#CF4444;
border-radius: 10px;
bottom: 30px;
right: 10px;
color: yellow;
font-family:"宋体"
}
</style>